import allMarker from "./mapMarker/allMarker";
let Hls = require('hls.js');
let Flv = require('flv.js');
import DPlayer from 'dplayer';
import {
    facility,
    dayEvent,
    watchkeeper,
    monitor,
    todayTop,
    afAll,
    afSeven,
    afTable,
    allPerson
} from '../../axios/intellect/intellect'
import moment from 'moment'

export default {
    components: {
        allMarker
    },
    props: {
        mapData: Object
    },
    data() {
        return {
            showHide: true,
            alertWindowShow: false,
            tableData: [
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 2},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 2},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 2},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
                // {name: '南门摄像头', type: 'IABA行为分析告警', date: '03-11/16:30', state: 1},
            ],
            page: 1,
            rows: 10,
            currentPage: 1,
            total: 0,
            facilityDatas: {},  //设施
            dayEventDatas: [],  //今日事件分析
            watchkeeperDatas: {},  //今日值班人员
            patrolArr: [],//巡逻人员数组
            monitorArr: [], //监控点位数组
            topArr: [],
            topSevenList: [],
            afAllArr: [],
            dayEventDatasList: [],
            afTotalNum: 0,
            sevenAfObj: {},
            sevenAfToalNum: 0,
            marker1:false,
            marker2:false,
            videoList : [],
            videoList2:[]
        }
    },
    created(){
        this.getpatrol() // 巡逻人员点位
    },
    mounted() {
        this.myChart1 = this.$echarts.init(document.getElementById('weekTop5'));
        this.myChart2 = this.$echarts.init(document.getElementById('dayDatas'));
        this.myChart3 = this.$echarts.init(document.getElementById('allDatas'));
        this.myChart4 = this.$echarts.init(document.getElementById('weekDatas'));
        this.getFacility();
        this.getDayEvent();
        this.getWatchkeeper();
        this.getTodayTop();
        this.getAfAll();
        this.getAfSeven();
        this.closeTheWindow();
        
        this.timer = setInterval(()=>{
            this.getFacility();
            this.getTodayTop();
            this.getDayEvent();
            this.getAfSeven();
            this.getAfAll();
        },10000)
        
    },
    destroyed(){
        window.clearInterval(this.timer)
    },
    methods: {
        closeTheWindow() {
            document.addEventListener('mouseup', (e) => {
                let box = this.$refs.windowBox
                if (box) {
                    if (!box.contains(e.target)) {
                        this.alertWindowShow = false
                    }
                }
            })
        },
        getFacility() {
            //获取设施
            facility().then(res => {
                this.facilityDatas = res.data;
            }, err => {
            })
        },
        getDayEvent() {
            //今日事件
            let params = {
                type: 3
            };
            dayEvent(params).then(res => {
                // console.log(res)
                this.dayEventDatas = res.data;
                this.dayEventDatasList = res.data.dvoList
            }, err => {
            })
        },
        getWatchkeeper() {
            //今日值班人员
            watchkeeper().then(res => {
                this.watchkeeperDatas = res.data;
            }, err => {
            })
        },
        getTodayTop() {
            todayTop().then(res => {
                // console.log(res)
                this.topArr = res.data.oneList.slice(0, 3);
                this.topSevenList = res.data.sevenList.slice(0, 5);
            }, err => {
            })
        },
        getAfAll() {
            let params = {
                type: 2
            };
            afAll(params).then(res => {
                this.afAllArr = res.data.allList;
                this.afTotalNum = res.data.totalNumber;
            }, err => {
            })
        },
        getAfSeven() {
            let params = {
                type: 3
            };
            afSeven(params).then(res => {
                // console.log(res)
                let dateArr = [];
                let imbaArr = [];
                let peopleArr = [];
                let fireArr = [];
                let faceArr = [];
                let tatal1 = 0;
                let tatal2 = 0;
                let tatal3 = 0;
                let tatal4 = 0;
                for (var i = 0; i < res.data.length; i++) {
                    let date = moment().subtract('days', i).format('MM-DD');
                    dateArr.push(date);
                    imbaArr.push(res.data[i].number2);
                    peopleArr.push(res.data[i].number3);
                    faceArr.push(res.data[i].number4);
                    fireArr.push(res.data[i].number5);
                    tatal1 += res.data[i].number1;
                    tatal2 += res.data[i].number2;
                    tatal3 += res.data[i].number3;
                    tatal4 += res.data[i].number4;
                }
                this.sevenAfObj = {
                    dateArr: dateArr,
                    imbaArr: imbaArr,
                    peopleArr: peopleArr,
                    fireArr: fireArr,
                    faceArr: faceArr
                }
                this.sevenAfToalNum = tatal1 + tatal2 + tatal3 + tatal4;
            }, err => {
            })
        },
        changeShow() {
            this.showHide = !this.showHide;
        },
        closeWindow() {
            this.alertWindowShow = false;
        },
        openWindow() {
            this.alertWindowShow = !this.alertWindowShow;
            this.getAfTable();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getAfTable();
        },
        getAfTable() {
            let params = {
                type: 2,
                data: {
                    size: this.rows,
                    current: this.page
                }
            }
            afTable(params).then(res => {
                this.total = res.data.total;
                this.tableData = res.data.records;
            }, err => {
            })
        },
        weekTop5Init(dom) {
            const monitorNames = [];
            const monitorRates = [];
            for (var i = 0; i < this.topSevenList.length; i++) {
                monitorNames.push(this.topSevenList[i].typeName);
                monitorRates.push(this.topSevenList[i].number);
            }
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    // transitionDuration: 0,
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    textStyle: {
                        color: '#fff'
                    },
                    borderWidth: '0',
                    formatter: function (params) {
                        let str = ''
                        for (let i = 0; i < params.length; i++) {
                            str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                        }
                        return str
                    },
                    axisPointer: {
                        lineStyle: {
                            type: 'solid',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        }
                    }
                },
                grid: {
                    top: 28,
                    left: 30,
                    right: 10,
                    bottom: 24
                },
                xAxis: {
                    data: monitorNames,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        interval: 0,
                    }
                },
                yAxis: {
                    name: '(件)',
                    nameTextStyle: {
                        color: "#B2CEEC",
                        fontSize: 10,
                        padding: [0, 0, 0, -30]
                    },
                    axisLabel: {
                        color: '#B2CEEC',
                        fontSize: 10,
                        formatter: '{value}',
                        
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }else{
                            return value.max;
                        }
                    }
                },
                series: [{
                    name: '近七天视频监控事件统计Top5',
                    type: 'bar',
                    data: monitorRates,
                    barCategoryGap: 55,
                    barWidth: 16,
                    itemStyle: {
                        color: '#32E9FF'
                    }
                }]
            }
            dom.setOption(option)
        },
        dayDatasInit(dom) {
            let dataArr = [];
            let colorArr = ['#2BADFF', '#FFAD95', '#32E9FF', '#EEFD7B'];
            for (var i = 0; i < this.dayEventDatasList.length; i++) {
                dataArr.push({
                    name: this.dayEventDatasList[i].gardName,
                    value: this.dayEventDatasList[i].number,
                    itemStyle: {color: colorArr[i]}
                })
            }
            const options = {
                title: {
                    text: '今日总事件数量',
                    left: '8%',
                    bottom: '-1%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['58%', '75%'],
                        center: ['20%', '45%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: false,
                            fontSize: 20,
                            formatter: '{b}\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        markLine: {
                            silent: true
                        },
                        data: dataArr
                    }
                ]
            }
            dom.setOption(options)
        },
        weekDatasInit(dom) {
            var myChart = this.$echarts.init(document.getElementById('weekDatas'));
            const dateArr = this.sevenAfObj.dateArr;
            const imbaArr = this.sevenAfObj.imbaArr;
            const peopleArr = this.sevenAfObj.peopleArr;
            const fireArr = this.sevenAfObj.fireArr;
            const faceArr = this.sevenAfObj.faceArr;
            // console.log(dateArr,imbaArr,peopleArr,faceArr,fireArr)
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    }
                },
                legend: [
                    {
                        orient: 'horizontal',
                        x: '5%',
                        y: '86%',
                        align: 'left',
                        data: ['人脸布控告警'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '26%',
                        y: '86%',
                        align: 'left',
                        data: ['人员密度告警'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '47%',
                        y: '86%',
                        align: 'left',
                        data: ['IABA行为分析告警'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    },
                    {
                        orient: 'horizontal',
                        x: '74%',
                        y: '86%',
                        align: 'left',
                        data: ['人脸抓拍信息上报'],
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                        itemHeight: 5, //修改icon图形大小
                        itemWidth: 5, //修改icon图形大小
                    }
                ],
                grid: {
                    top: 0,
                    left: 50,
                    right: 10,
                    bottom: 50
                },
                calculable: true,
                xAxis: [{
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    splitArea: {
                        show: false
                    },
                    splitNumber: 5,
                    minInterval: 1,
                    max: function (value) {
                        if( value.max <= 1 ){
                            return value.max  = 10;
                        }else{
                            return value.max;
                        }
                        
                    }
                }],
                yAxis: [{
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(48,178,236,0.6)'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#B2CEEC',
                        fontSize: 10
                    },
                    data: dateArr
                }],
                series: [
                    {
                        name: '人脸布控告警',
                        type: 'bar',
                        stack: '总量',
                        barMaxWidth: 8,
                        barGap: '10%',
                        itemStyle: {color: '#2BADFF'},
                        data: imbaArr
                    },
                    {
                        name: '人员密度告警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#32E9FF'},
                        data: peopleArr
                    },
                    {
                        name: 'IABA行为分析告警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#FFAD95'},
                        data: faceArr
                    },
                    {
                        name: '人脸抓拍信息上报',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {color: '#EEFD7B'},
                        data: fireArr
                    },
                ]
            }
            dom.setOption(option)
        },
        allDatasInit(dom) { 
            let dataArr = [];
            let colorArr = ['#2BADFF', '#FFAD95', '#32E9FF', '#EEFD7B'];
            for (var i = 0; i < this.afAllArr.length; i++) {
                dataArr.push({
                    name: this.afAllArr[i].typeName,
                    value: this.afAllArr[i].number,
                    itemStyle: {color: colorArr[i]}
                })
            }
            const options = {
                title: {
                    text: '总事件数量',
                    left: '15%',
                    bottom: '14%',
                    align: 'center',
                    textStyle: {
                        fontSize: 10,
                        color: '#B2CEEC'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '52%'],
                        center: ['25%', '45%'],
                        avoidLabelOverlap: true,
                        hoverAnimation: false,
                        startAngle: 30,
                        emphasis: {},
                        label: {
                            show: false,
                            fontSize: 20,
                            formatter: '{b}\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        markLine: {
                            silent: true
                        },
                        data: dataArr
                    }
                ]
            }
            dom.setOption(options)
        },
        // 获取巡检人员坐标信息
        getpatrol() {
            // // 监控点位
            monitor(4200).then(res => {
                console.log(res.data, '监控点位')
                this.marker1 = true;
                let videoList = []
                res.data.forEach((item,index) => {
                    item.names = "监控"
                    if( index < 30 && index > 26 ){
                        this.videoList.push(item)
                    }
                    if( index < 15 && index > 11 ){
                        this.videoList2.push(item)
                    }
                })
                // this.monitorArr = videoList
                this.monitorArr = res.data
                
                console.log(this.monitorArr)
            })
            // 巡检人员
            allPerson().then(res => {
                // console.log(res.data, '巡检人员')
                this.marker2 = true;
                res.data.forEach(item => {
                    item.names = "巡检人员"
                })
                this.patrolArr = res.data
            })
        },
    },
    computed: {
        markersGet() {
            //点位监听 2个接口数据
            const { marker1, marker2 } = this
            return {
                marker1,
                marker2,
            }
        }
    },
    watch: {
        deep:true,
        markersGet(newval, oldval) {
            // 监听4个接口的数据，都拿到以后渲染点位信息
            if(newval.marker1 === true && newval.marker2 === true) {
                this.markerData = [
                    this.monitorArr,// 监控点位
                    this.patrolArr // 巡检人员
                ]
                this.$refs.allMarker.setAllMarker(this.markerData, this.mapData)
            }
        },
        'topSevenList':{
            handler(newVal,oldVal){
                // console.log(1111)
                this.weekTop5Init(this.myChart1);
            }
        },
        'dayEventDatasList':{
            handler(newVal,oldVal){
                this.dayDatasInit(this.myChart2);
            }
        },
        'afAllArr':{
            handler(newVal,oldVal){
                this.allDatasInit(this.myChart3);
            }
        },
        'sevenAfObj':{
            handler(newVal,oldVal){
                this.weekDatasInit(this.myChart4);
            }
        },
        'showHide' : {
            handler(newVal,oldVal){
                console.log(newVal)
                if( !newVal ){
                    if( this.videoList.length > 0 ){
                        this.$nextTick(function(){
                            this.videoList.forEach((item,index)=>{
                                const dp = new DPlayer({
                                    container: document.getElementById('ldplayer' + index),
                                    live: true,
                                    screenshot: true,
                                    autoplay : true,
                                    preload:'auto',
                                    mutex : false,
                                    lang : 'zh-cn',
                                    hotkey : false,
                                    contextmenu:[],
                                    video: {
                                        url: item.privateM3u8Url,
                                        pic: item.imgurl,
                                        thumbnails: item.imgurl,
                                        type: 'customFlv',
                                        customType: {
                                            customHls: function (video, player) {
                                                const hls = new Hls();
                                                hls.loadSource(video.src);
                                                hls.attachMedia(video);
                                            },
                                            customFlv: function (video, player) {
                                                const flvPlayer =Flv.createPlayer({
                                                    type: 'flv',
                                                    url: video.src,
                                                });
                                                flvPlayer.attachMediaElement(video);
                                                flvPlayer.load();
                                            },
                                        },
                                    },
                                    // subtitle: {
                                    //     url: 'http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8',
                                    //     type: 'hls',
                                    // },
                                });
                            })
                            
                            this.videoList2.forEach((item,index)=>{
                                console.log(document.getElementById('lldplayer' + index))
                                const dp = new DPlayer({
                                    container: document.getElementById('lldplayer' + index),
                                    live: true,
                                    screenshot: true,
                                    autoplay : true,
                                    preload:'auto',
                                    mutex : false,
                                    lang : 'zh-cn',
                                    hotkey : false,
                                    contextmenu:[],
                                    video: {
                                        url: item.privateM3u8Url,
                                        pic: item.imgurl,
                                        thumbnails: item.imgurl,
                                        type: 'customFlv',
                                        customType: {
                                            customHls: function (video, player) {
                                                const hls = new Hls();
                                                hls.loadSource(video.src);
                                                hls.attachMedia(video);
                                            },
                                            customFlv: function (video, player) {
                                                const flvPlayer =Flv.createPlayer({
                                                    type: 'flv',
                                                    url: video.src,
                                                });
                                                flvPlayer.attachMediaElement(video);
                                                flvPlayer.load();
                                            },
                                        },
                                    },
                                    // subtitle: {
                                    //     url: 'http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8',
                                    //     type: 'hls',
                                    // },
                                });
                            })
                            console.log(document.getElementById('ldplayer0'))
                            
                        })
                    }
                }
            }
        },
    },
    // beforeDestroy() {
    //     this.$emit('removeMarker')
    // }
}